<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:51:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:12:46
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
-->
<template>
  <div class="right_center">
    <Echart
      :options="options"
      id="centerRightChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { currentGET } from "api";
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.pageflag = true;
      currentGET("big6", { companyName: this.companyName }).then((res) => {
        console.log("安装计划", res);
        if (res.success) {
          this.init(res.data);
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    init(newData) {
      this.options = {
        color: ['#e86452', '#00eaff'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                },
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        grid: {
          top: '18%',
          right: '5%',
          left: '8%',
          bottom: '15%',
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['1月', '2月', '3月', '4月', '5月', '6月'],
            splitLine: {
                show: false
            },
            axisTick: {
                show: false,
                alignWithLabel: true,
            },
            axisLine: {
                lineStyle: {
                    color: '#03405d'
                }
            },
            axisLabel: {
                color: '#F3F4F4',
                textStyle: {
                    fontSize: 12
                },
            },
        },
        yAxis: {
            type: 'value',
            name: '单 位：立方米',
            max: 450,
            interval: 150,
            nameTextStyle: {
              color: '#FFF'
            },
            axisLabel: {
                color: '#F3F4F4',
                textStyle: {
                    fontSize: 12
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#03405d'
                }
            },
            axisLine: {
                show: false
            },
        },
        series: [{
            name: '取水统计',
            type: 'bar',
            barWidth: '18',
            itemStyle: {
              normal: {
                  color: graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(0,77,167,1)' // 0% 处的颜色
                  }, {
                      offset: 1,
                      color: 'rgba(0,244,255,1)' // 100% 处的颜色
                  }], false),
                  barBorderRadius: [30, 30, 0, 0]
              }
            },
            data: [195,320,310,330,360,280]
          }
        ]
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_center {
  width: 100%;
  height: 260px;
  .echarts_bottom {
    width: 100%;
    height: 230px;
  }
}
</style>